<template>
	<div class="config-component" v-show="activeElement">
		<y-tabs @switchTab="onSwitchTab" position="top">
			<y-tab-panel
				:iconClass="item.info.iconClass"
				:key="index"
				:name="item.info.title"
				v-for="(item, index) in localProps"
			>
				<y-form-item
					:align="fItem.align"
					:height="
						fItem.align === 'topToBottom'
							? 'auto'
							: fItem.height
							? fItem.height
							: 40
					"
					:key="fIndex"
					:staticTitle="fItem.staticTitle"
					:title="fItem.title"
					:width="fItem.width ? fItem.width : 70"
					v-for="(fItem, fIndex) in item.fields"
				>
					<div class="config-content_wrap" v-if="fItem.type !== 'group'">
						<!-- <span>1</span> -->
						<component
							:is="fItem.type"
							v-bind="{ ...fItem.value }"
							v-if="fItem.value.valueType && fItem.value.valueType === 'refer'"
							v-model="item.fields[0].value[fItem.value.value]"
						/>

						<component
							:is="fItem.type"
							v-bind="{ ...fItem.value }"
							v-else
							v-model="fItem.value.value"
						/>
					</div>
					<div :class="fItem.value[0].align" class="config-value_item" v-else>
						<div :key="vIndex" v-for="(vItem, vIndex) in fItem.value">
							<div class="config-value_item_wrap" v-if="vItem.showTitle">
								<y-form-item
									:align="vItem.align"
									:height="vItem.height ? vItem.height : 40"
									:staticTitle="vItem.staticTitle"
									:title="vItem.title"
									:width="vItem.width ? vItem.width : 70"
								>
									<div
										class="config-refer_item"
										v-if="
											vItem.value.valueType && vItem.value.valueType === 'refer'
										"
									>
										<component
											:is="vItem.type"
											v-bind="{ ...vItem.value }"
											v-model="fItem.value[0].value[vItem.value.value]"
										/>
									</div>
									<div class="config-refer_item" v-else>
										<component
											:is="vItem.type"
											v-bind="{ ...vItem.value }"
											v-model="vItem.value.value"
										/>
									</div>
								</y-form-item>
							</div>
							<div class="config-value_item_wrap" v-else>
								<div
									class="config-refer_item"
									v-if="
										vItem.value.valueType && vItem.value.valueType === 'refer'
									"
								>
									<!-- <span>3</span> -->
									<component
										:is="vItem.type"
										v-bind="{ ...vItem.value }"
										v-model="fItem.value[0].value[vItem.value.value]"
									/>
								</div>
								<div class="config-refer_item" v-else>
									<component
										:is="vItem.type"
										v-bind="{ ...vItem.value }"
										v-model="vItem.value.value"
									/>
								</div>
							</div>
						</div>
					</div>
				</y-form-item>
			</y-tab-panel>
		</y-tabs>
	</div>
</template>

<script>
import { mapGetters } from "vuex";
import EditSource from "@/components/edit-source/edit-source";
import ResponseData from "@/components/response-data/response-data";
import ConfigSource from "@/components/config-source/config-source";
import SelectImage from "@/components/select-image/select-image";
import EventEdit from "@/components/event-edit/event-edit";
import ColorEdit from "@/components/color-edit/color-edit";
import EditStringArray from "@/components/edit-string-array/edit-string-array";
import EditNumberArray from "@/components/edit-number-array/edit-number-array";

export default {
	name: "ConfigComponent",
	data() {
		return {
			tabIndex: 0,
		};
	},
	computed: {
		localProps() {
			return this.activeElement ? this.activeElement.props : [];
		},
		...mapGetters(["activeElement"]),
	},
	methods: {
		onSwitchTab(name, index) {
			console.log("tab", name, index);
			this.tabIndex = index;
		},
	},
	mounted() {},
	updated() {
		if (this.tabIndex == 1 && this.localProps.length >= 2) {
			this.$bus.$emit("createMonacoInstance");
		}
	},
	components: {
		EditSource,
		ResponseData,
		ConfigSource,
		SelectImage,
		EventEdit,
		ColorEdit,
		EditStringArray,
		EditNumberArray,
	},
};
</script>

<style lang="stylus" scoped>
.config-component {
	position: relative;
	display: flex;
	width: 332px;
	.config-content_wrap {
		width: 100%;
		height: 100%;
	}
	.config-value_item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		&.topToBottom {
			display: flex;
			flex-direction: column;
			margin-bottom: 10px;
		}
		.config-refer_item {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100%;
			// margin-top: 10px;
		}
	}
}
.ui-tab-panel {
	padding: 0 10px;
}
</style>
